<template>
	<view class="container">
		<map id="map" class="mapBox" :latitude="latitude" :longitude="longitude" :scale='14' :markers="markers" :polyline='polyline'></map>
		<view class="info">
			<view class="navBox">
				<u-tabs bgColor="transparent" barHeight="4" inactive-color="#666666" :height="100" barActiveColor='#3DB020'
					active-color="#333333" :list="navlist" :is-scroll="false" :current="current" @change="change"></u-tabs>
			</view>
			<view class="che flex-ac">
				<image src="../../../../static/img/che.png" mode=""></image> {{orderInfo.licensePlate}} 节点追踪
			</view>
			<scroll-view scroll-y="true" style="width: 100%; height: 100%;">
				<view class="itemBox flex-ac" v-if="current === 0">
					<image src="../../../../static/img/shou.png" class="jd-icon" mode=""></image>
					<view class="jd-info">
						<view class="jd1">{{orderInfo.planUnloadTime || ''}}</view>
						<view class="jd2">{{orderInfo.receiverDistrictName || ''}}{{orderInfo.receiverDetailLocation || ''}}</view>
						<view class="line"></view>
					</view>
				</view>
				<view class="itemBox flex-ac" v-if="current === 0">
					<image src="../../../../static/img/fa.png" class="jd-icon" mode=""></image>
					<view class="jd-info">
						<view class="jd1">{{orderInfo.planLoadTime || ''}}</view>
						<view class="jd2">{{orderInfo.senderDistrictName || ''}}{{orderInfo.senderDetailLocation || ''}}</view>
					</view>
				</view>
				<view class="itemBox flex-ac" v-if="current === 1">
					<image src="../../../../static/img/jdx.png" class="jd-icon" mode=""></image>
					<view class="jd-info">
						<view class="jd1">{{orderInfo.unloadTime || ''}}</view>
						<view class="jd2">{{orderInfo.realReceiverDistrictName || ''}}{{orderInfo.realReceiverDetailLocation || ''}}</view>
						<view class="line"></view>
					</view>
				</view>
				<view class="itemBox flex-ac" v-if="current === 1">
					<image src="../../../../static/img/jdz.png" class="jd-icon" mode=""></image>
					<view class="jd-info">
						<view class="jd1">{{orderInfo.loadTime || ''}}</view>
						<view class="jd2">{{orderInfo.realSenderDistrictName || ''}}{{orderInfo.realSenderDetailLocation || ''}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import config from '@/utils/config.js' //这个就是你在第一步申请的key值
	const amapFile = require('@/utils/amap-wx.130.js') //引入高德地图 ，根据自己放置的文件路径来决定
	const myAmapFun = new amapFile.AMapWX({
		key: config.MAP_KEY
	}); //创建一个实例化对象
	export default {
		data() {
			return {
				navlist: [{
						name: '系统轨迹'
					}, {
						name: 'App轨迹'
					},
					// {
					// 	name: '设备轨迹'
					// }
				],
				current: 0,
				id: this.id,
				orderInfo: {},
				polyline: [],
				markers: [],
				latitude: '',//中心点纬度
				longitude: '',//中心点经度
			}
		},
		onLoad(opt) {
			if (opt) console.log('opt:', opt)
			this.id = opt.id
			this.getTrackInfo()
		},
		watch:{
			current(){
				if(this.current === 1){
					this.getRoute(this.orderInfo.realSenderLongitude, this.orderInfo.realSenderLatitude, this.orderInfo.realReceiverLongitude,this.orderInfo.realReceiverLatitude)
					this.latitude = this.orderInfo.realSenderLatitude
					this.longitude = this.orderInfo.realSenderLongitude
					this.markers[0] = {
						id: 3,
						latitude: this.orderInfo.realSenderLatitude,
						longitude: this.orderInfo.realSenderLongitude,
						iconPath: '../../../../static/img/mdd.png',
						width: 32,
						height: 32
					}
					this.markers[1] = {
						id: 4,
						latitude: this.orderInfo.realReceiverLatitude,
						longitude: this.orderInfo.realReceiverLongitude,
						iconPath: '../../../../static/img/cfd.png',
						width: 32,
						height: 32
					}
				}else{
					this.getRoute(this.orderInfo.senderLongitude, this.orderInfo.senderLatitude, this.orderInfo.receiverLongitude,this.orderInfo.receiverLatitude)
					this.latitude = this.orderInfo.senderLatitude
					this.longitude = this.orderInfo.senderLongitude
					this.markers[0] = {
						id: 1,
						latitude: this.orderInfo.senderLatitude,
						longitude: this.orderInfo.senderLongitude,
						iconPath: '../../../../static/img/mdd.png',
						width: 32,
						height: 32
					}
					this.markers[1] = {
						id: 2,
						latitude: this.orderInfo.receiverLatitude,
						longitude: this.orderInfo.receiverLongitude,
						iconPath: '../../../../static/img/cfd.png',
						width: 32,
						height: 32
					}
				}
			}
		},
		methods: {
			change(index) {
				this.current = index;
			},
			// 获取路线
			getRoute(senderLongitude,senderLatitude, receiverLongitude, receiverLatitude) {
				myAmapFun.getDrivingRoute({
					origin: senderLongitude + ',' + senderLatitude,
					destination: receiverLongitude + ',' + receiverLatitude,
					success: (data) => {
						console.log('路线:', data)
						let points = [];
						if (data.paths && data.paths[0] && data.paths[0].steps) {
							let steps = data.paths[0].steps;
							for (let i = 0; i < steps.length; i++) {
								let poLen = steps[i].polyline.split(';');
								for (let j = 0; j < poLen.length; j++) {
									points.push({
										longitude: parseFloat(poLen[j].split(',')[0]),
										latitude: parseFloat(poLen[j].split(',')[1])
									})

								}
							}
						}
						this.polyline.push({
							points: points,
							color: "#00C22C",
							width: 5
						});
					}
				})
			},

			// 获取运单运输信息 /consignorApi/transportOrder/getTrackInfo
			getTrackInfo() {
				this.$Net.get('/consignorApi/transportOrder/getTrackInfo', {
					id: this.id
				}).then(res => {
					console.log('运单信息:', res)
					this.orderInfo = res.data.transportOrder
					this.getRoute(this.orderInfo.senderLongitude, this.orderInfo.senderLatitude, this.orderInfo.receiverLongitude,this.orderInfo.receiverLatitude)
					this.latitude = this.orderInfo.senderLatitude
					this.longitude = this.orderInfo.senderLongitude
					this.markers[0] = {
						id: 1,
						latitude: this.orderInfo.senderLatitude,
						longitude: this.orderInfo.senderLongitude,
						iconPath: '../../../../static/img/mdd.png',
						width: 32,
						height: 32
					}
					this.markers[1] = {
						id: 2,
						latitude: this.orderInfo.receiverLatitude,
						longitude: this.orderInfo.receiverLongitude,
						iconPath: '../../../../static/img/cfd.png',
						width: 32,
						height: 32
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f9f9f9;
	}
</style>

<style lang="scss" scoped>
	@import './orderMap.scss';
</style>